<template>
  <!-- 饼图2 -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let index = ref(); //ref的应用

// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  //props.carData
  let angle = 0; // 角度
  let dataValue = 65;
  let option = {
    backgroundColor: "#002837",
    title: {
      text: `{v|${dataValue}}{unit|%}\n{t|完成率}`,
      x: "center",
      y: "center",
      textStyle: {
        rich: {
          v: { fontSize: 40, color: "#28edf2" },
          unit: { fontSize: 20, color: "#28edf2" },
          t: { fontSize: 25, color: "#28edf2" },
        },
      },
    },
    series: [
      /** 绘制内部圆弧-1 <right-top> */
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: (params, api) => {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((270 + angle) * Math.PI) / 180,
              endAngle: ((360 + angle) * Math.PI) / 180,
            },
            style: {
              fill: "transparent",
              stroke: "rgba(1, 248, 68, 0.4)",
              lineWidth: 2,
            },
            silent: true,
          };
        },
        data: [0],
      },
      /** 绘制内部圆弧-2 <left-bottom> */
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: (params, api) => {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((90 + angle) * Math.PI) / 180,
              endAngle: ((180 + angle) * Math.PI) / 180,
            },
            style: {
              fill: "transparent",
              stroke: "rgba(1, 248, 68, 0.4)",
              lineWidth: 2,
            },
            silent: true,
          };
        },
        data: [0],
      },
      /** 绘制外部圆弧-1 <right-bottom> */
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: (params, api) => {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.66,
              startAngle: ((355 + -angle) * Math.PI) / 180,
              endAngle: ((120 + -angle) * Math.PI) / 180,
            },
            style: {
              fill: "transparent",
              stroke: "rgba(1, 248, 68, 0.4)",
              lineWidth: 2.6,
            },
            silent: true,
          };
        },
        data: [0],
      },
      /** 绘制外部圆弧-2 <left-top> */
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: (params, api) => {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.66,
              startAngle: ((175 + -angle) * Math.PI) / 180,
              endAngle: ((300 + -angle) * Math.PI) / 180,
            },
            style: {
              fill: "transparent",
              stroke: "rgba(1, 248, 68, 0.4)",
              lineWidth: 2.6,
            },
            silent: true,
          };
        },
        data: [0],
      },
      /** 绘制外部圆弧-1-开始圆点 <right-bottom> */
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: (params, api) => {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.66;
          return {
            type: "circle",
            shape: {
              /** 角度355° 外弧1开始角度 */
              cx: x0 + r * Math.cos(((355 + -angle) * Math.PI) / 180),
              cy: y0 + r * Math.sin(((355 + -angle) * Math.PI) / 180),
              r: 4,
            },
            style: {
              fill: "rgba(1, 248, 68, 0.4)",
              stroke: "rgba(1, 248, 68, 0.4)",
            },
            silent: true,
          };
        },
        data: [0],
      },
      /** 绘制外部圆弧-2-开始圆点 <left-top> */
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: (params, api) => {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.66;
          return {
            type: "circle",
            shape: {
              /** 角度175° 外弧2开始角度 */
              cx: x0 + r * Math.cos(((175 + -angle) * Math.PI) / 180),
              cy: y0 + r * Math.sin(((175 + -angle) * Math.PI) / 180),
              r: 4,
            },
            style: {
              fill: "rgba(1, 248, 68, 0.4)",
              stroke: "rgba(1, 248, 68, 0.4)",
            },
            silent: true,
          };
        },
        data: [0],
      },
      /** 刻度仪表盘 */
      {
        type: "gauge",
        center: ["50%", "50%"],
        radius: "100%", // 错位调整此处
        startAngle: 0,
        endAngle: 360,
        axisLine: { show: false },
        splitLine: { show: false },
        axisTick: {
          splitNumber: 10,
          // length: 8,  // 刻度长度
          length: "4%",
          lineStyle: {
            color: "rgba(1, 248, 68, 0.4)",
            width: 1.5,
          },
        },
        axisLabel: { show: false },
      },
      /** 内心圆 */
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: (params, api) => {
          return {
            type: "circle",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.38,
              startAngle: ((175 + angle) * Math.PI) / 180,
              endAngle: ((300 + angle) * Math.PI) / 180,
            },
            style: {
              fill: "transparent",
              stroke: "#00374C80",
              lineWidth: 2.6,
            },
            silent: true,
          };
        },
        data: [0],
      },
      /** 饼图 */
      {
        name: "已完成",
        type: "pie",
        startAngle: 90,
        z: 0,
        label: {
          position: "center",
        },
        radius: ["60%", "70%"],
        silent: true,
        animation: false, // 关闭饼图动画
        data: [
          {
            value: dataValue,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0.2,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: "#01f74420" },
                  { offset: 1, color: "#01f744" },
                ],
              },
            },
          },
          {
            name: "未完成",
            value: 100 - dataValue,
            label: { show: false },
            itemStyle: { color: "#00374C" },
          },
        ],
      },
      /** 饼图上刻度 */
      {
        type: "gauge",
        center: ["50%", "50%"],
        radius: "100%", // 错位调整此处
        startAngle: 0,
        endAngle: 360,
        splitNumber: 12,
        axisLine: { show: false },
        splitLine: {
          // length: 39,
          length: "24%",
          lineStyle: {
            width: 10,
            color: "#002837",
          },
        },
        axisTick: { show: false },
        axisLabel: { show: false },
      },
    ],
  };
  setInterval(() => {
    angle = angle + 2;
    chart.setOption(option, true);
  }, 100);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
